<template>
  <div id="box">
    <u-head :title="tit"></u-head>
    <van-search
      @keydown.enter="goSearch"
      background="#ccc"
      v-model="keyword"
      placeholder="请输入关键词"
    />
    <div class="shangpin">
      <ul>
        <li @click="goDetail(item.id)" v-for="item in arr" :key="item.id">
          <div class="left">
            <img :src="item.img" :alt="item.goodsname" />
          </div>
          <div class="right">
            <p>{{ item.goodsname }}</p>
            <p>
              <span>￥{{ item.price }}</span>
              <span>￥{{ item.market_price }}</span>
            </p>
            <!-- <slot name="two"></slot> -->
            <p><span>1233评论</span><span>99%好评</span></p>
          </div>
        </li>
        <li
          v-if="!arr.length"
          class="nulls"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        >
          <p class="tips">暂无数据</p>
          <van-button round class="bottom-button">随便逛逛</van-button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import http from "../utils/http";
import uHead from "../components/public/uHead.vue";
export default {
  components: {
    uHead,
  },
  data() {
    return {
      tit: "商品搜索",
      keyword: "",
      arr: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    //获取搜索结果的列表
    getList() {
      this.keyword = sessionStorage.getItem("keywords")? sessionStorage.getItem("keywords") : this.$route.query.keyword;
      http.get(`/api/search?keywords=${sessionStorage.getItem("keywords")? sessionStorage.getItem("keywords") : this.keyword}`).then((res) => {
        if (res.list == null) {
          return;
        }
        res.list.forEach((item) => {
          item.img = this.$pregImg + item.img;
          this.arr.push(item);
        });
      });
    },
    goSearch() {
      sessionStorage.setItem("keywords",this.keyword)
      http.get(`/api/search?keywords=${this.keyword}`).then((res) => {
        this.arr = [];
        if (res.list == null) {
          return;
        }
        res.list.forEach((item) => {
          item.img = this.$pregImg + item.img;
          this.arr.push(item);
        });
      });
    },
    goDetail(id){
      this.$router.push({ path: "detail", query: { id } });
    }

  },
};
</script>
<style lang='less' scoped>
.shangpin {
  width: 100%;
  ul {
    width: 100%;
    li {
      width: 100%;
      display: flex;
      height: 2.6rem;
      padding: 0 0.25rem;
      // margin-bottom: 40px;
      align-items: center;
      .left {
        width: 2.8rem;
        height: 2.8rem;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 2.3rem;
          height: 2.3rem;
        }
      }

      .right {
        flex: 1;
        p {
          font-size: 0.3rem;
        }
        p:first-child {
          font-size: 0.28rem;
          color: #424244;
        }
        p:nth-child(2) {
          margin-top: 0.12rem;
          span:first-child {
            color: #fa6144;
            font-size: 0.26rem;
          }
          span:last-child {
            text-decoration: line-through;
            color: #ccc;
            font-size: 0.26rem;
          }
        }
        p:nth-child(3) {
          width: 1.5rem;
          color: #fff;
          height: 0.45rem;
          line-height: 0.48rem;
          border-radius: 0.1rem;
          text-align: center;
          font-size: 0.24rem;
          background-color: #ff8065;
          margin-top: 0.14rem;
        }
        p:last-child {
          font-size: 0.24rem;
          color: #ccc;
          margin-top: 0.15rem;
          span:last-child {
            margin-left: 0.4rem;
          }
        }
      }
    }
    .nulls {
      font-size: 0.52rem;
      color: red;
      justify-content: center;
    }
  }
}
.navigation {
  width: 7.5rem;
  height: 0.7rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 0.3rem;
  color: #fff3f2;
  text-align: center;
  background: skyblue;
}
</style>
